import React, { Component } from 'react';
import { Calendar } from 'antd-mobile';
import { formatDate } from '@/assets/js/methods'
import "../order/OrderProgress.scss"
import "./Platformreconciliation.scss"
import { Button } from 'antd-mobile'

const now = new Date();
class Platformreconciliation extends Component {
	originbodyScrollY = document.getElementsByTagName('body')[0].style.overflowY;
	constructor() {
		super()
		this.state = {
			show: false,
			config: {
				type: 'one'
			},
		}
	}
	onSelectHasDisableDate = (dates) => {
		console.warn('onSelectHasDisableDate', dates);
	}

	onConfirm = (startTime) => {
		console.log(startTime.getTime())
		document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
		this.setState({
			show: false,
			startTime: formatDate(startTime.getTime())
		});
	}

	onCancel = () => {
		document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
		this.setState({
			show: false,
			startTime: undefined,
			endTime: undefined,
		});
	}
	componentDidMount() {
		document.getElementsByTagName('title')[0].innerHTML = '平台对账'
		this.setState({
			startTime: formatDate(new Date().getTime())
		})
	}
	render() {
		let height = window.screen.height
		return (
			<div className="other-page OrderProgress platformreconciliation" style={{ minHeight: height + 'px' }}>
				<div className="topbar flex y-center space-between">
					<span className="flex y-center">
						<span>类型:平台对账</span>
					</span>
					<span className="flex y-center">
						<span>{this.state.startTime}</span>
						<img src={require('../../images/calendar.png')}
							alt=""
							className="ml20"
							onClick={() => {
								document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
								this.setState({
									show: true
								});
							}} />
					</span>
				</div>
				{/*基本收益*/}
				<div className='modalbox'>
					<div className='left'>
						<span>基</span>
						<span>本</span>
						<span>收</span>
						<span>益</span>
					</div>
					<div className='right'>
						<div className='rightitem'>
							<span>进货总额</span>
							<span>￥8800.00</span>
						</div>
						<div className='rightitem'>
							<span>销售总额</span>
							<span>￥8800.00</span>
						</div>
						<div className='rightitem'>
							<span style={{ flex: 1, textAlign: 'left' }}>出货单</span>
							<span><span style={{ color: '#ff4a4a' }}>21</span>单 ></span>
							{/*<img src='../../images/jiantou.png' alt='' />*/}
						</div>
						<div className='rightitem'>
							<span style={{ flex: 1, textAlign: 'left' }}>退货单</span>
							<span><span style={{ color: '#ff4a4a' }}>1</span>单 ></span>
							{/*<img src='../../images/jiantou.png' alt='' />*/}
						</div>
						<div className='rightitem' style={{ borderBottomWidth: 0 }}>
							<span>毛利润</span>
							<span>￥8800.00</span>
						</div>
					</div>
				</div>
				{/*安装费用*/}
				<div className='modalbox'>
					<div className='left'>
						<span>安</span>
						<span>装</span>
						<span>费</span>
						<span>用</span>
					</div>
					<div className='right'>
						<div className='rightitem'>
							<span>总订单</span>
							<span>20单</span>
						</div>
						<div className='rightitem'>
							<span style={{ flex: 1, textAlign: 'left' }}>已安装</span>
							<span><span style={{ color: '#ff4a4a' }}>21</span>单 ></span>
							{/*<img src='../../images/jiantou.png' alt='' />*/}
						</div>
						<div className='rightitem'>
							<span style={{ flex: 1, textAlign: 'left' }}>待分配</span>
							<span><span style={{ color: '#ff4a4a' }}>1</span>单 ></span>
							{/*<img src='../../images/jiantou.png' alt='' />*/}
						</div>
						<div className='rightitem' style={{ borderBottomWidth: 0 }}>
							<span>总支出</span>
							<span>￥8800.00</span>
						</div>
					</div>
				</div>
				{/*销售费用*/}
				<div className='modalbox'>
					<div className='left'>
						<span>销</span>
						<span>售</span>
						<span>费</span>
						<span>用</span>
					</div>
					<div className='right'>
						<div className='rightitem'>
							<span>总订单</span>
							<span>20单</span>
						</div>
						<div className='rightitem'>
							<span style={{ flex: 1, textAlign: 'left' }}>线下销售</span>
							<span><span style={{ color: '#ff4a4a' }}>21</span>单 ></span>
							{/*<img src='../../images/jiantou.png' alt='' />*/}
						</div>
						<div className='rightitem'>
							<span style={{ flex: 1, textAlign: 'left' }}>线上客户</span>
							<span><span style={{ color: '#ff4a4a' }}>1</span>单 ></span>
							{/*<img src='../../images/jiantou.png' alt='' />*/}
						</div>
						<div className='rightitem' style={{ borderBottomWidth: 0 }}>
							<span>总支出</span>
							<span>￥8800.00</span>
						</div>
					</div>
				</div>
				{/*平台服务*/}
				<div className='modalbox'>
					<div className='left'>
						<span>平</span>
						<span>台</span>
						<span>服</span>
						<span>务</span>
					</div>
					<div className='right'>
						<div className='rightitem'>
							<span>总订单</span>
							<span>20单</span>
						</div>
						<div className='rightitem'>
							<span style={{ flex: 1, textAlign: 'left' }}>线下销售</span>
							<span><span style={{ color: '#ff4a4a' }}>21</span>单</span>
							<img src={require('../../images/jiantou.png')} alt='' />
						</div>
						<div className='rightitem'>
							<span style={{ flex: 1, textAlign: 'left' }}>线上客户</span>
							<span><span style={{ color: '#ff4a4a' }}>1</span>单</span>
							<img src={require('../../images/jiantou.png')} alt='' />
						</div>
						<div className='rightitem' style={{ borderBottomWidth: 0 }}>
							<span>总支出</span>
							<span>￥8800.00</span>
						</div>
					</div>
				</div>
				<div className='interest'>净利润：<span style={{ color: '#ff4a4a' }}>￥45450.00</span></div>
				<div className='bottombuts'>
					<Button className='left-white-but' style={{ flex: 1 }}>查看全部订单</Button>
					<Button className='right-red-but' style={{ flex: 1 }}>提现</Button>
				</div>

				<Calendar
					{...this.state.config}
					visible={this.state.show}
					onCancel={this.onCancel}
					onConfirm={this.onConfirm}
					onSelectHasDisableDate={this.onSelectHasDisableDate}
					getDateExtra={this.getDateExtra}
					defaultDate={now}
					minDate={new Date(+now - 5184000000)}
					maxDate={new Date(+now + 31536000000)}
				/>
			</div>
		);
	}
}

export default Platformreconciliation;